<%--
  Created by IntelliJ IDEA.
  User: 86147
  Date: 2023/12/27
  Time: 17:02
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>志愿者管理系统</title>
    <style type="text/css">
        .bg1{
            background: #E3E3E3;
        }

        .bg2{
            background: #EEE8AA;
        }

        .bg3{
            color: white;
            background: red;
        }
        table{
            width: 100%;
            margin: 0 auto;
            /* 让表格和单元格的边框合并 */
            border-collapse: collapse;
        }
        td,th{
            text-align: center;
            height:50px;

        }
        h1{
            text-align: center;
            color:#B94844;margin-bottom: 1em;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">

        <h1>志愿项目</h1>
        <table id="cart-table" border="1">
            <tr>
                <th >内容</th>
                <th >联系电话</th>
                <th >时间</th>
                <th >需要志愿者数</th>
                <th >已报名人数</th>
                <th ></th>
                <th ></th>
            </tr>
            <tr>
                <td >打扫卫生</td>
                <td >11111111111</td>
                <td >2021.7.21 10:00--12:00</td>
                <td >20</td>
                <td >3</td>
                <td ><button  onclick="choose(this)">报名</button></td>
                <td ><button onclick="xq(this)">详情介绍</button></td>
            </tr>
            <tr>
                <td >图书馆图书整理</td>
                <td >2222222222222</td>
                <td >2021.7.21 15:00--17:00</td>
                <td >30</td>
                <td >5</td>
                <td ><button  onclick="choose(this)">报名</button></td>
                <td ><button onclick="xq(this)">详情介绍</button></td>
            </tr>
            <tr>
                <td >实验室机房</td>
                <td >2222222222222</td>
                <td >2021.7.22 12:30--14:00</td>
                <td >20</td>
                <td >2</td>
                <td ><button  onclick="choose(this)">报名</button></td>
                <td ><button onclick="xq(this)">详情介绍</button></td>
            </tr>
            <tr>
                <td >讲座宣传</td>
                <td >2222222222222</td>
                <td >2021.7.22 12:30--14:00</td>
                <td >10</td>
                <td >9</td>
                <td ><button onclick="choose(this)">报名</button></td>
                <td ><button onclick="xq(this)">详情介绍</button></td>
            </tr>
            <tr>
                <td >新冠疫苗宣传</td>
                <td >2222222222222</td>
                <td >2021.7.22 12:30--14:00</td>
                <td >20</td>
                <td >3</td>
                <td ><button  onclick="choose(this)">报名</button></td>
                <td ><button onclick="xq(this)">详情介绍</button></td>
            </tr>
        </table>


    </div>
    <div class="row">
        <h1><a href="#mytable">我的任务</a></h1>
        <table id="mytable" border="1" >
            <tr id="head">
                <th >内容</th>
                <th >联系电话</th>
                <th >时间</th>
                <th >操作</th>
            </tr>
        </table>
    </div>
    <div class="row">
        <iframe id="my-iframe"  frameborder="0" width="200" scrolling="auto">

        </iframe>
    </div>
</div>
<script >
    //表格隔行变色
    var table=document.getElementById("cart-table");
    var trs = table.getElementsByTagName('tr');
    for (var i = 0; i < trs.length; i++) {
        if(i % 2 == 1){
            trs[i].className = "bg1";
            //自定义一个属性来暂时存储当前className的值
            trs[i].oldClassName = "bg1";
        }else{
            trs[i].className = "bg2";
            trs[i].oldClassName = "bg2";
        }
        //鼠标事件
        //onmouseover
        trs[i].onmouseover = function(){
            //当鼠标滑过，改变className之前，将原来的className暂时存储起来
            this.oldClassName = this.className;
            this.className = "bg3";
        }
        //鼠标离开事件onmouseout
        trs[i].onmouseout = function(){
            this.className = this.oldClassName;
        }
    }

    //报名按钮
    function choose(obj){
        var n=parseInt(obj.parentNode.parentNode.childNodes[9].innerHTML);
        var headTr = document.getElementById("head");
        var str=obj.parentNode.parentNode.childNodes[1].innerHTML;
        //var tr =headTr.cloneNode(true);
        var tr = document.createElement('tr');
        var td0 = document.createElement('td');
        td0.innerHTML=str;
        var td1 = document.createElement('td');
        td1.innerHTML=obj.parentNode.parentNode.childNodes[3].innerHTML;
        var td2 = document.createElement('td');
        td2.innerHTML=obj.parentNode.parentNode.childNodes[5].innerHTML;
        var del=document.createElement("td");
        del.style.width="400";
        del.innerHTML="<button onclick='del(this)'>取消报名</button>";
        tr.appendChild(td0);
        tr.appendChild(td1);
        tr.appendChild(td2);
        tr.appendChild(del);
        //mytable.appendChild(tr);
        mytable.insertBefore(tr, headTr.nextElementSibling);
        n=n+1;
        obj.parentNode.parentNode.childNodes[9].innerHTML=n;
        //if(n>=parseInt(obj.parentNode.parentNode.childNodes[7].innerHTML)){
        obj.style.display="none";
        //}
    }
    //删除按钮
    function del(obj){
        var tr=obj.parentNode.parentNode;
        var str=tr.firstChild.innerHTML.toString();
        //原志愿项目的报名人数减少 1
        for(var i=1;i<trs.length;i++){
            var n=parseInt(trs[i].childNodes[9].innerHTML);
            if(trs[i].childNodes[1].innerHTML==str){
                n=n-1;
                trs[i].childNodes[9].innerHTML=n;
                //if(parseInt(trs[i].childNodes[9].innerHTML)<parseInt(trs[i].childNodes[7].innerHTML)   ){
                trs[i].childNodes[11].firstChild.style.display="inline";
                //}
            }
        }
        tr.parentNode.removeChild(tr);
    }
    //详情介绍按钮
    function xq(obj){
        var tr=obj.parentNode.parentNode.childNodes[1].innerHTML;
        var t=document.getElementById("my-iframe");
        t.setAttribute("src",tr+".html");
    }
</script>
</body>
</html>
